<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/vue.min.js"></script>
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">名字({{todos.length}})</h3>
      </div>
      <div class="panel-body">
          <ul class="list-group">
            <li v-for="(item,index) in todos" class="list-group-item">{{index+1}}---{{item.title}}</li>

          </ul>
          <input type="text" name="" value="" class="form-control" v-model="newData.title" id="">
          <button @click="addNews(newData)" type="button" name="button" class="btn btn-success">添加</button>
      </div>
      <div class="panel-footer">

      </div>
    </div>
  </div>
</body>

<script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                newData:{
                        id:null,
                        title:''
                      },
                todos:[
                  {id:1,title:'去吃饭'},
                  {id:2,title:'睡觉'},
                  {id:3,title:'吃点啥'},
                  {id:4,title:'厉害'},
                  {id:5,title:'嘿嘿嘿'},
                ]
            },
            methods:{
                addNews(data){
                  this.todos.push(data)
                  this.newData={id:null,
                  title:''}
                }
            }
        })
</script>
</html>
